<template>
	<view class="profile_photo">
		<z-paging ref="paging" v-model="dataList" @query="queryList" empty-view-img="../../static/img/nullData.png"
			empty-view-text="暂无数据">
			<!-- 头部固定 -->
			<view slot="top">
				<u-tabs :list="tablist" @change="changeTab" :inactiveStyle="{color: '#999'}"
					:activeStyle="{color: 'var(--echo-main-color)'}" lineColor="var(--echo-main-color)"></u-tabs>
			</view>
			<view class="nft_lists_card" v-if="index == 0">
				<nft-card v-for="item in dataList" :key="item.serialNo" :item="item"
					@changeUrl="changeUrl('theme', item.theme.serialNo)" bacg="#f1f1f1" nftNameColor="#333" cardType="myNFT">
				</nft-card>
			</view>
			<view class="nft_lists_card" v-else-if="index == 1">
				<nft-card v-for="item in dataList" :key="item.serialNo" :item="item" @changeUrl="changeUrl('fragment')"
					bacg="#f1f1f1" nftNameColor="#333" cardType="myNFT"></nft-card>
			</view>
			<view class="nft_lists_card" v-else>
				<nft-card v-for="item in dataList" :key="item.serialNo" :item="item"
					@changeUrl="changeUrl('identity', item.grade)" bacg="#f1f1f1" nftNameColor="#333" cardType="myNFT">
				</nft-card>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getMyNftThemes,
		getMyPositions
	} from '@/config/nftApi.js';
	export default {
		data() {
			return {
				// 请求数据
				dataList: [],
				// 客户编号
				customerNo: '',
				// tab切换内容
				tablist: [
					{
						name: 'NFT主题',
					},
					{
						name: 'NFT碎片',
					},
					{
						name: 'NFT身份',
					},
				],
				// tab切换
				index: 0
			}
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		methods: {
			// tab切换
			changeTab(item) {
				this.index = item.index
				console.log('this.index', this.index)
				this.$refs.paging.reload();
			},
			// 请求列表数据  0主题 1碎片
			queryList(pageNo, pageSize) {
				if (this.index == 0) {
					getMyNftThemes({
						pageNo,
						pageSize,
						customerNo: this.customerNo,
						type: '0'
					}).then(res => {
						console.log(res)
						if (res)
							this.$refs.paging.completeByTotal(res?.data, res?.pagination?.totalSize);
					})
				} else if (this.index == 1) {
					getMyNftThemes({
						pageNo,
						pageSize,
						customerNo: this.customerNo,
						type: '1'
					}).then(res => {
						console.log(res)
						if (res)
							this.$refs.paging.completeByTotal(res?.data, res?.pagination?.totalSize);
					})
				} else {
					getMyPositions({
						pageNo,
						pageSize,
						customerNo: this.customerNo
					}).then(res => {
						console.log(res)
						if (res)
							this.$refs.paging.completeByTotal(res?.data, res?.pagination?.totalSize);
					})
				}
			},
			// 跳转
			changeUrl(type, id) {
				// 碎片
				if (type == 'fragment') {
					uni.navigateTo({
						url: "/pages/my/myNftDetailFragment"
					})
				}
				// 主题
				else if (type == 'theme') {
					uni.navigateTo({
						url: "/pages/my/myNftDetailTheme?exhibitionType=NFT" + "&serialNo=" + id
					})
				}
				// 身份
				else {
					uni.navigateTo({
						url: "/pages/my/myNftDetailTheme?exhibitionType=identity" + "&grade=" + id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nft_lists_card {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30rpx 30rpx;
	}
</style>
